<script setup>
import AsideMenu from '../components/home/AsideMenu.vue'

import HomeHeader from '../components/home/HomeHeader.vue'

import { useMenuStore } from '../stores/menu'

import { storeToRefs } from 'pinia'

import MainView from '../components/home/MainView.vue'

const menuStore = useMenuStore()

const { isCollapse } = storeToRefs(menuStore)
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <HomeHeader></HomeHeader>
      </el-header>
      <el-container>
        <el-aside :class="isCollapse ? 'asideisCollapse' : 'asideisExpend'">
          <AsideMenu></AsideMenu>
        </el-aside>
        <el-main>
          <MainView></MainView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.el-main {
  padding: 0;
  overflow: hidden;
}

.asideisCollapse {
  width: 64px;
}

.asideisExpend {
  width: 200px;
}

.common-layout {
  .el-header {
    height: 48px;
    padding: 0px;
  }
  height: 100%;
  .el-container {
    height: 100%;
    .el-aside {
      background-color: #312e81;
    }
  }
}
</style>
